<template>
  <div class="login-block">
    <div class="login-subject">

      <el-form label-width="80px" style="margin: 30px 50px;" :model="ruleForm" ref="ruleForm">
        <span style="float: right;margin: 0 15px 30px 0;color:#5dd5c8;font-size: 20px;font-weight: 700;">
          超级管理员登录
        </span>
        <el-input v-model="ruleForm.accName" prefix-icon="el-icon-user" class="login-subject-input" placeholder="用户名" prop="accName"></el-input>

        <el-input v-model="ruleForm.pass" show-password prefix-icon="el-icon-lock" class="login-subject-input"
          placeholder="密码" prop="pass"></el-input>

        <el-button type="primary" style="width: 100%;background: #5dd5c8;" @click="submitForm('ruleForm')">登录</el-button>

      </el-form>
    </div>
  </div>
</template>

<script>
// import Cookies from 'js-cookie'
// import http from '../../../util/http'
/**
   * description  登录界面
   */
import { login } from '@/api/user'
export default {
  name: 'slogin',
  data () {
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('账号不能为空'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      ruleForm: {
        accName: '',
        pass: ''
      },
      rules: {
        accName: [
          { validator: checkUser, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
      // formdata: {
      //   username: 'm' + this.username,
      //   password: ''
      // }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.ruleForm)
        const data = {
          ...this.ruleForm,
          role: 3
        }
        login(data).then(res => {
          console.log(res)
          if (res.data.meta.status === 200) {
            const token = res.data.data.token
            localStorage.setItem('userToken', token)
            const userMsg = res.data.data.user
            localStorage.setItem('userMsg', JSON.stringify(userMsg))
            this.$router.push({ path: '/index' })
          } else {
            this.$message({
              message: res.data.meta.msg,
              type: 'warning'
            })
          }
        })
      })
    }

  }
}
</script>

<style scoped>
  .login-block {
    height: 100%;
  }

  .login-subject {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 350px;
    border-radius: 2%;
    background: #FFFFFF;
    margin: -220px 0 0 -250px;
  }

  .login-subject-input {
    margin-bottom: 35px;
  }
</style>
